<template>
  <div class="tool_interest">
    <TopHeader></TopHeader>
    <div class="mainTitle">
      <div class="container headArea">
        <div class="left">
          <div class="title">职业兴趣测试</div>
          <div class="describe">当前测试进度 {{ tabNum }} / 20</div>
        </div>
      </div>
    </div>
    <div :class="['container', 'qusArea', notAnsQus ? 'paddingTop24' : '']">
      <div class="notAnsQuestion" v-show="notAnsQus">
        <div class="tip">有题目尚未选择答案</div>
        <img class="closeImage" @click="notAnsQus = false" src="../../assets/icon_close_red.png" alt="">
      </div>
      <div class="questionBase">
        <span v-show="tabNum==1 || tabNum==4 || tabNum==7 || tabNum==10 || tabNum==13 || tabNum==16">以下题目请依据：不管是否能做好，选中您喜欢的</span>
        <span v-show="tabNum==2 || tabNum==5 || tabNum==8 || tabNum==11 || tabNum==14 || tabNum==17 ">以下题目请依据：选择您具备的能力，选中代表具备</span>
        <span v-show="tabNum==3 || tabNum==6 || tabNum==9 || tabNum==12 || tabNum==15 || tabNum==18">以下题目请依据：以下职行业中，选中您有兴趣的</span>
      </div>
      <div v-for="(item,index) in intelligence" :key="index">
        <div :class="['textQuestions', notAnsQus && hasChoIndexRadio[index] == undefined ? 'noFinishTheQus' : '']" v-show="item.isShow===tabNum">
          <div class="qusTitle">{{item.issue}}</div>
          <div class="choRadioArea">
            <div class="choItem" @click="handleChoSingleTextQus(index, item.val1)">
              <img v-if="hasChoIndexRadio[index] > 0" src="../../assets/login/radio_checked.png" alt="">
              <img v-else src="../../assets/login/radio_unchecked.png" alt="">
              <span v-show="tabNum==1 || tabNum==4 || tabNum==7 || tabNum==10 || tabNum==13 || tabNum==16">喜欢</span>
              <span v-show="tabNum==2 || tabNum==5 || tabNum==8 || tabNum==11 || tabNum==14 || tabNum==17 ">能</span>
              <span v-show="tabNum==3 || tabNum==6 || tabNum==9 || tabNum==12 || tabNum==15 || tabNum==18">有兴趣</span>
            </div>
            <div class="choItem" @click="handleChoSingleTextQus(index, item.val2)">
              <img v-if="hasChoIndexRadio[index] == 0" src="../../assets/login/radio_checked.png" alt="">
              <img v-else src="../../assets/login/radio_unchecked.png" alt="">
              <span v-show="tabNum==1 || tabNum==4 || tabNum==7 || tabNum==10 || tabNum==13 || tabNum==16">不喜欢</span>
              <span v-show="tabNum==2 || tabNum==5 || tabNum==8 || tabNum==11 || tabNum==14 || tabNum==17 ">不能</span>
              <span v-show="tabNum==3 || tabNum==6 || tabNum==9 || tabNum==12 || tabNum==15 || tabNum==18">没兴趣</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabNum===19">
        <div class="dragQuestionArea">
          <div class="dragTitle">
            <div class="title">181、以下请根据强弱优势拖拽进行排序</div>
            <div class="describe">拖动右侧的选项到左边的次序位置进行排序</div>
          </div>
          <dragable :dragList="ites" :dropList="qusList" @handleDragend="handleDragend" @handleDrop="handleDrop"></dragable>
        </div>
      </div>
      <div v-if="tabNum===20">
        <div class="dragQuestionArea">
          <div class="dragTitle">
            <div class="title">182、以下请根据强弱优势拖拽进行排序</div>
            <div class="describe">拖动右侧的选项到左边的次序位置进行排序</div>
          </div>
          <dragable :dragList="ites2" :dropList="qusList2" @handleDragend="handleDragend2" @handleDrop="handleDrop2"></dragable>
        </div>
      </div>
      <div class="submitBtn" v-if="tabNum < 20" @click="handleJumpNextGroup">下一组</div>
      <div class="submitBtn" v-else @click="handleCreateResult">提交生成结果</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueDND from 'awe-dnd'
Vue.use(VueDND)

import TopHeader from "~/components/topHeader";
import intelligence from '~/static/json/intelligence.json'
import ls from 'store2'
import dragable from './components/dragable'

export default {
  components: {
    TopHeader,
    dragable
  },
  data() {
    return {
      tabNum: 1,
      intelligence: intelligence.history,
      notAnsQus: false, // 是否完成了该组测试    true --> 未完成   false --> 已完成
      zyxqScore: [0, 0, 0, 0, 0, 0],
      checkList: [],
      hasChoIndexRadio: [],
      scrollTop: 0,
      // 181题
      ites: [
        {
          nm: '机械操作能力',
          type: 'R'
        }, {
          nm: '科学研究能力',
          type: 'I'
        }, {
          nm: '艺术创作能力',
          type: 'A'
        }, {
          nm: '解释表达能力',
          type: 'S'
        }, {
          nm: '商业洽谈能力',
          type: 'E'
        }, {
          nm: '事务执行能力',
          type: 'C'
        }
      ],
      qusList: [],
      // 182题
      ites2: [
        {
          nm: '体育技能',
          type: 'R'
        }, {
          nm: '数学技能',
          type: 'I'
        }, {
          nm: '音乐技能',
          type: 'A'
        }, {
          nm: '交际技能',
          type: 'S'
        }, {
          nm: '领导技能',
          type: 'E'
        }, {
          nm: '办公技能',
          type: 'C'
        }
      ],
      qusList2: [],
    }
  },
  mounted() {
  },
  methods: {
    handleDrop(data) {
      if (data.nm) {
        if (this.notAnsQus) this.notAnsQus = false
        let norepeat = true
        for (const item of this.qusList) {
          if (item.nm == data.nm) {
            norepeat = false
          }
        }
        if (norepeat) this.qusList.push(data)
      }
    },
    handleDragend(data) {
      if (data.nm) {
        this.ites = this.ites.filter(x => x.nm !== data.nm)
        if (this.qusList.indexOf(data) == -1) this.qusList.push(data)
      }
    },
    handleDrop2(data) {
      if (data.nm) {
        if (this.notAnsQus) this.notAnsQus = false
        let norepeat = true
        for (const item of this.qusList2) {
          if (item.nm == data.nm) {
            norepeat = false
          }
        }
        if (norepeat) this.qusList2.push(data)
      }
    },
    handleDragend2(data) {
      if (data.nm) {
        this.ites2 = this.ites2.filter(x => x.nm !== data.nm)
        if (this.qusList2.indexOf(data) == -1) this.qusList2.push(data)
      }
    },
    handleChoSingleTextQus(index, val) {
      // vue更新视图
      this.$set(this.hasChoIndexRadio, index, val)
    },
    // 下一组
    handleJumpNextGroup() {
      this.$nextTick(() => {
        const that = this
        let timer = setInterval(() => {
          let ispeed = Math.floor(-that.scrollTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
          if (that.scrollTop === 0) {
            clearInterval(timer)
          }
        }, 16)
      })
      if (this.tabNum <= 18) {
        this.handleJudgeIsFinish()
        if (!this.notAnsQus) {
          // 如果完成了当前页面的测试，进入下一组
          this.handleFinishTheQus()
        }
      } else if (this.tabNum == 19) {
        if (this.qusList.length == 6) {
          this.hasChoIndexRadio[180] = JSON.stringify(this.qusList)
          this.qusList[0].score = 6
          this.qusList[1].score = 5
          this.qusList[2].score = 4
          this.qusList[3].score = 3
          this.qusList[4].score = 2
          this.qusList[5].score = 1
          this.qusList.forEach(ite => {
            if (ite.type === 'R') {
							this.zyxqScore[0] += ite.score
						}
						if (ite.type === 'S') {
							this.zyxqScore[1] += ite.score
						}
						if (ite.type === 'I') {
							this.zyxqScore[2] += ite.score
						}
						if (ite.type === 'E') {
							this.zyxqScore[3] += ite.score
						}
						if (ite.type === 'A') {
							this.zyxqScore[4] += ite.score
						}
						if (ite.type === 'C') {
							this.zyxqScore[5] += ite.score
						}
          })
          this.tabNum += 1
        } else {
          this.notAnsQus = true
        }
      
      }
    },
    // 提交生成结果
    handleCreateResult() {
      if (this.qusList2.length == 6) {
        this.hasChoIndexRadio[181] = JSON.stringify(this.qusList2)
        this.qusList2[0].score = 6
        this.qusList2[1].score = 5
        this.qusList2[2].score = 4
        this.qusList2[3].score = 3
        this.qusList2[4].score = 2
        this.qusList2[5].score = 1
        this.qusList2.forEach(ite => {
          if (ite.type === 'R') {
            this.zyxqScore[0] += ite.score
          }
          if (ite.type === 'S') {
            this.zyxqScore[1] += ite.score
          }
          if (ite.type === 'I') {
            this.zyxqScore[2] += ite.score
          }
          if (ite.type === 'E') {
            this.zyxqScore[3] += ite.score
          }
          if (ite.type === 'A') {
            this.zyxqScore[4] += ite.score
          }
          if (ite.type === 'C') {
            this.zyxqScore[5] += ite.score
          }
        })
        let obj = {
          status: 1,
          worthScore: this.zyxqScore,
          allResultAnswer: this.hasChoIndexRadio
        }
        ls.set('resultPar', obj)
        ls.set('interestResult', obj)
        this.commonJs.gosto('../testResult')
      } else {
        this.notAnsQus = true
      }
    },
    // 判断当前组是否有题目未完成
    handleJudgeIsFinish() {
      for (let i = (this.tabNum - 1) * 10; i < 10 * this.tabNum; i += 1) {
        if (this.hasChoIndexRadio[i] == undefined) {
          this.notAnsQus = true
          return;
        } else {
          this.notAnsQus = false
        }
      }
    },
    // 完成当前组的测试
    handleFinishTheQus() {
      let singleGroupScore = 0
      for (let i = (this.tabNum - 1) * 10; i < 10 * this.tabNum; i += 1) {
        singleGroupScore += this.hasChoIndexRadio[i]
      }
      this.zyxqScore[this.tabNum - 1] = singleGroupScore
      this.tabNum += 1
    },
    
  }

}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  .tool_interest {
    padding-bottom: 100px;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      padding-top: 33px;
      .headArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          .title {
            color: @defaultColor;
            font-size: 22px;
            line-height: 29px;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .describe {
            color: #9E9E9E;
            font-size: 16px;
            line-height: 21px;
          }
        }
      }
    }
    .qusArea {
      padding-top: 32px;
      .notAnsQuestion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        margin-bottom: 24px;
        background: #FFF7F7;
        width: 100%;
        height: 44px;
        .tip {
          color: #EB4E3F;
          font-size: 14px;
        }
        .closeImage {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
      .questionBase {
        span {
          display: inline-block;
          margin-bottom: 32px;
          color: #6F7880;
          font-size: 14px;
          line-height: 19px;
        }
      }
      .textQuestions {
        margin-bottom: 16px;
        padding: 8px;
        border: 1px solid transparent;
        .qusTitle {
          color: @defaultColor;
          font-size: 16px;
          line-height: 21px;
          font-weight: bold;
          margin-bottom: 24px;
        }
        .choRadioArea {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .choItem {
            width: 240px;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            .img {
              width: 16px;
              height: 16px;
            }
            span {
              color: #343A40;
              font-size: 16px;
              margin-left: 32px;
            }
          }
          .choItem+.choItem {
            margin-left: 16px;
          }
          .choItem:hover {
            background: #F7F7FA;
          }
        }
      }
      .noFinishTheQus {
        border-color: #EB4E3F;
        .qusTitle {
          color: #EB4E3F;
        }
      }
      .dragQuestionArea {
        padding-top: 32px;
        .dragTitle {
          margin-bottom: 21px;
          .title {
            color: @defaultColor;
            font-size: 16px;
            line-height: 21px;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .describe {
            color: #9E9E9E;
            font-size: 14px;
            line-height: 19px;
          }
        }
        .dragArea {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .sortBase {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin-right: 33px;
            .topMax {
              color: #FF8A00;
              font-size: 18px;
              line-height: 33px;
              margin-bottom: 16px;
            }
            .sortNum {
              width:24px;
              height:372px;
              background:rgba(255,255,255,1) linear-gradient(360deg,rgba(255,138,0,0.3) 0%,rgba(255,138,0,1) 100%);
              border-radius:12px;
              display: flex;
              justify-content: flex-start;
              flex-direction: column;
              align-items: center;
              padding-top: 18px;
              margin-bottom: 16px;
              .sortItem {
                color: #fff;
                font-size: 18px;
                line-height: 18px;
                margin-bottom: 44px;
              }
              .sortItem:last-child {
                margin-bottom: 0;
              }
            }
            .bottomMin {
              color: #B8BCBF;
              font-size: 18px;
              line-height: 33px;
            }
          }
          .dragInArea {
            width: 360px;
            height: 372px;
            border-radius: 4px;
            border: 1px solid #EBECED;
            margin-right: 16px;
            .inItem {
              width: 100%;
              height: 62px;
              padding: 10px 24px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px solid #EBECED;
              cursor: pointer;
              span {
                color: #222;
                font-size: 16px;
              }
              img {
                width: 24px;
                height: 24px;
              }
            }
          }
          .dragOutList {
            width: 360px;
            height: 372px;
            .outItem {
              width: 360px;
              height: 54px;
              margin-bottom: 8px;
              background: #FAFAFA;
              border-radius: 4px;
              padding: 10px 24px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              span {
                color: #222;
                font-size: 16px;
              }
              img {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }
    }
    .paddingTop24 {
      padding-top: 24px;
    }
    .submitBtn {
      margin: 150px auto 0;
      width: 150px;
      height: 50px;
      line-height: 50px;
      background: #FF8A00;
      border-radius: 2px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
  }
</style>